<!DOCTYPE html>
        <html lang="en">
        <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>防抖</title>
</head>
<body>
<!--
没有防抖的输入框持续输入时，每键入一个字母都执行一次处理函数
有防抖的输入框持续输入时，在键入字母结束之后才执行一次处理函数
-->
<label for='undebounce'>没防抖:</label>
<input type="text" id='undebounce' onInput='onInput1(event)' >
<br />
<label for="debounce">有防抖:</label>
<input type="text" id='debounce' onInput='debounceInput(event)' >

<script>
    function debounce(fn, delay){
        let time = null
        return function(...args){
            // 定时器存在 清除定时器 因为新的进来了
            if(time){
                clearTimeout(time)
            }
            // 开启定时器 处理连续输入
            time = setTimeout(()=>{
                // 用this来执行fn函数
                fn.apply(this, args)
            },delay)
        }
    }
    function onInput(e){
        val = e.target.value
        if(val){
            console.log('有防抖',val)
        }
    }

    const debounceInput = debounce(onInput, 300)

    function onInput1(e){
        val = e.target.value
        if(val){
            console.log('没有防抖',val)
        }
    }
</script>
</body>

